<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery">
          <el-form-item label="店铺名称">
            <el-autocomplete
              class="inline-input"
              v-model="listQuery.keyword"
              :fetch-suggestions="querySearch"
              placeholder="店铺名称"
            ></el-autocomplete>

          </el-form-item>
          <el-button @click="searchList()" type="primary" size="small">查询结果</el-button>
        </el-form>
      </div>
    </el-card>
    <div class="operation-crumb clearfix">
      <el-button type="primary" @click="toAdd()">增加</el-button>
    </div>
    <div class="table-container">
      <el-table
        ref="freightTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        :header-cell-class-name="tableHeaderClassName"
        border
      >
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="模板编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.templateId}}</template>
        </el-table-column>
        <el-table-column label="店铺名称" align="center">
          <template slot-scope="scope">{{scope.row.shopName}}</template>
        </el-table-column>
        <el-table-column label="模板名称" align="center">
          <template slot-scope="scope">{{scope.row.templateName}}</template>
        </el-table-column>
        <el-table-column label="计费方式" width="120" align="center">
          <template slot-scope="scope">{{scope.row.chargeMode|formatChargeMode}}</template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import api from "@/http";

export default {
  name: "freightList",
  data() {
    return {
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 10
      },
      list: null,
      total: null,
      listLoading: true,
      multipleSelection: []
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatChargeMode(value) {
      if (value === 1) {
        return "按件计费";
      } else return "按重量";
    }
  },
  methods: {
    querySearch(s,cb) {
      this.$api.supplier.fetchList(this.listQuery).then(response => {
        response.data.list.forEach(element => {
          element['value']=element.shopName;
        });
         cb(response.data.list);
      });
    },
    searchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    // 表格背景色
    tableHeaderClassName({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "header-bg";
      }

      return "";
    },
    getList() {
      this.listLoading = true;
      this.$api.freight.fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
        this.totalPage = response.data.totalPage;
        this.pageSize = response.data.pageSize;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdate(index, row) {
      this.$router.push({ path: "/freight/update", query: { id: row.id } });
    },
    handleDelete(index, row) {
      this.$confirm("是否确定要删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$api.freight.updateDeleteStatus(row.id).then(response => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000
          });
          this.getList();
        });
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    toAdd() {
      this.$router.push("/freight/add");
    }
  }
};
</script>



